<template>
  <div class="home">
    <div class="snsapi_userinfo" v-if="show_snsapi_userinfo">
      <div class="logo">
        <img src="@/assets/logo.png" alt="">
      </div>
      <div class="t1">
        登录后开发者将获得以下权限
      </div>
      <div class="t2">
        获得你的公开信息（昵称、头像等）
      </div>
      <div class="btn" @click="getWx_userinfo">确认登录</div>
    </div>
  </div>
</template>

<script>
import {getUrlParam} from "../utils";
import md5 from "md5";
import {Dialog} from "vant";
import {api_weixinScan} from "../api";

export default {
  name: 'Home',
  data() {
    return {
      show_snsapi_userinfo:false
    }
  },
  mounted() {
    if(!getUrlParam('code')){
      if(getUrlParam('page')==='orderConfirm'){
        this.getWx_base()
      }else {
        this.show_snsapi_userinfo=true
      }
    }else{
      if (getUrlParam('state')==='orderConfirm'){
        this.goPay()
      }else {
        this.goLogin()
      }
    }
  },
  methods: {
    lang(str) {
      return str?this.$t('home.'+str):''
    },
    getWx_userinfo(){
      localStorage.setItem('homePage_serial_number',getUrlParam('serial_number'))
      location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${getUrlParam('app_id')}&redirect_uri=${encodeURI(location.origin+location.pathname)}&response_type=code&scope=snsapi_userinfo&state=home#wechat_redirect`
    },
    getWx_base(){
      localStorage.setItem('orderConfirm',JSON.stringify({
        product_id:getUrlParam('product_id'),
        cuser_id:getUrlParam('cuser_id'),
        order_no:getUrlParam('order_no'),
        cuser_code:getUrlParam('cuser_code'),
        sign:getUrlParam('sign'),
        product_name:getUrlParam('product_name'),
        price:getUrlParam('price'),
        timestamp:getUrlParam('timestamp'),
        app_id:getUrlParam('app_id'),
        serial_number:getUrlParam('serial_number'),
      }))
      location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${getUrlParam('app_id')}&redirect_uri=${encodeURI(location.origin+location.pathname)}&response_type=code&scope=snsapi_base&state=orderConfirm#wechat_redirect`
    },
    goLogin(){
      //扫码登录
      const serial_number=localStorage.getItem('homePage_serial_number')
      if(!serial_number){
        return
      }
      api_weixinScan({
        code:getUrlParam('code'),
        serial_number,
        sign:md5(getUrlParam('code')+serial_number)
      }).then((res) => {
        Dialog({
          title: '扫码成功',
          message: '请在电视端继续操作',
          confirmButtonColor:'#576b95',
        }).then(() => {
          WeixinJSBridge.call('closeWindow');
        });
      }).catch(() => {

      })
    },
    goPay(){
      let query={
        ...JSON.parse(localStorage.getItem('orderConfirm')),
        code:getUrlParam('code')
      }
      localStorage.removeItem('orderConfirm')
      this.$router.push({
        path:'/orderConfirm',
        query
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.home{
  .snsapi_userinfo{
    padding:60px 30px;
    .logo{
      border-bottom: 1px solid #dedede;
      padding-bottom: 50px;
      img{
        width: 65px;
        height: 65px;
      }
    }
    .t1{
      font-size: 15px;
      text-align: left;
      color: #222;
      padding: 30px 0 15px;
    }
    .t2{
      padding-left: 15px;
      text-align: left;
      font-size: 13px;
      line-height: 20px;
      color: #999;
      position: relative;
      padding-bottom: 50px;
      &:before{
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 4px;
        background:#999 ;
        position: absolute;
        top: 6px;
        left: 0;
      }
    }
    .btn{
      text-align: center;
      line-height: 50px;
      background: #07C061;
      border-radius: 6px;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 15px;
      color: #FFFFFF;
    }
  }
}
</style>
